<fieldset class="layui-elem-field layui-field-title">
    <legend>卡片A</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md">
            <div class="ul-common-flex-list">
                <div class="ul-card-a" data-repeat="3">
                    <div class="ul-card-a-left">
                        <img width="100%" src="{$site_logo_src}" alt="">
                    </div>
                    <div class="ul-card-a-right">
                        <div class="ul-card-a-main">
                            <div class="ul-card-a-title">
                                卡片标题
                            </div>
                            <div class="ul-card-a-desc">
                                这是卡片说明
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>银行卡</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md">
            <div class="ul-card-bank" data-repeat="3">
                <div class="ul-common-flex-sb ul-card-bank-header">
                    <div class="ul-card-bank-title">
                        中国银行
                    </div>
                    <div class="ul-card-bank-number">
                        尾号 ********123456
                    </div>
                </div>
                <div class="ul-common-flex-sb ul-card-bank-body">
                    <div class="ul-card-bank-line">
                        <div class="ul-card-bank-line-triangle"></div>
                    </div>
                    <div class="ul-card-bank-tips">
                        默认
                    </div>
                </div>
                <div class="ul-common-flex-sb ul-card-bank-footer">
                    <div class="ul-card-bank-time">
                        绑定日期:2021-03-15
                    </div>
                    <div class="ul-card-bank-name">
                        **宏
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>详细属性卡片</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md layui-bg-gray">
            <div class="layui-card ul-card">
                <div class="layui-card-header">
                    <span class="ul-card-status layui-bg-green">意向</span>
                    <span class="ul-card-title">卡片面板</span>
                    <span class="ul-card-options">
                        <span>2021年3月29日</span>
                        <span class=""><i class="layui-icon layui-icon-right"></i></span>
                    </span>
                </div>
                <div class="layui-card-body">
                    <div class="data-item">
                        <span class="data-title">入库时间:</span>
                        <span class="data-value">2021年3月29日16:33:21</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">用户名称:</span>
                        <span class="data-value">奥古斯宏</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">公司名称:</span>
                        <span class="data-value">临沂奥宏网络科技有限公司</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">电话:</span>
                        <span class="data-value">13012341234</span>
                    </div>
                    <div class="data-item">
                        <span class="data-title">相册:</span>
                        <span class="data-img">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                            <img class="data-img-main" src="/static/images/view.jpg" alt="">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>极简图标卡片</legend>
    <div class="layui-field-box">
        <div class="ul-card-simple-icon" data-repeat="3">
            <div class="ul-card-simple-icon-image" style="background-image: url('/static/images/view.jpg');">

            </div>
            <div class="ul-card-simple-icon-title">
                图标
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>消息信息操作卡片</legend>
    <div class="layui-field-box ">
        <div class="ul-padding-md ul-bg-gray">

            <div class="ul-card-message">
                <div class="header">
                    <div class="title">
                        奥宏科技·预约会议
                    </div>
                    <div class="status">
                        技术人员
                    </div>
                </div>
                <div class="body">
                    <div class="item">
                        <div class="item-title">
                            预约时间
                        </div>
                        <div class="item-value">
                            2022年4月4日14:29:12
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            地点
                        </div>
                        <div class="item-value">
                            一楼会议室
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            备注
                        </div>
                        <div class="item-value">
                            备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
                    <div class="layui-btn layui-btn-sm layui-btn-normal">确认</div>
                </div>
            </div>
        </div>


    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>用户主页名片</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md ul-bg-gray" style="width:300px">
            <div class="ul-info-card">
                <div class="header">
                    <div class="img" style="background-image: url('/static/images/view.jpg');">

                    </div>
                </div>
                <div class="body">
                    <div class="title">
                        奥宏科技
                    </div>
                    <div class="line">

                    </div>
                    <div class="info">
                        <div class="info-item">
                            <div class="info-title">ID</div>
                            <div class="info-value">2369</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title">性别</div>
                            <div class="info-value">男</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title">工作时间</div>
                            <div class="info-value">3年</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title">地址</div>
                            <div class="info-value">山东省临沂市兰山区</div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="layui-btn layui-btn-fluid layui-btn-normal">
                        <i class="layui-icon layui-icon-cellphone"></i> 立即联系
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>


<fieldset class="layui-elem-field layui-field-title">
    <legend>数据详情卡片-简约</legend>
    <div class="layui-field-box">
        <div class="ul-mobile-box">
            <div class="ul-data-card">
                <div class="header">
                    <div class="mian">
                        <i class="layui-icon layui-icon-user"></i>
                        <span>奥古斯宏</span>
                    </div>
                    <div class="plus">
                        <div class="layui-btn layui-btn-sm">详情</div>
                    </div>
                </div>
                <div class="body">
                    <div class="main">
                        <div class="item" data-repeat="3">
                            <div class="item-title">
                                姓名：
                            </div>
                            <div class="item-value">
                                张三
                            </div>
                        </div>

                        <div class="item">
                            <div class="item-title">
                                地址：
                            </div>
                            <div class="item-value">
                                内蒙古大兴安岭雷达峰红岸基地
                            </div>
                        </div>

                    </div>
                </div>
                <div class="footer">
                    <div class="main">
                        2022年4月14日21:28:44
                    </div>
                    <div class="plus">
                        <div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</fieldset>
